<template>
  <div class="modules-blog-aside sticky-position" ref="blog-aside">
    <div class="details-catalogue" v-show="$route.meta.catalogue" ref="outlineElementBox">
      <el-card class="box-card" shadow="hover">
        <div slot="header">
          <span class="title">目录</span>
        </div>
        <div class="outlineElement" ref="outlineElement"></div>
      </el-card>
    </div>
    <div class="follow-me">
      <el-card class="box-card" shadow="hover">
        <h1 class="follow-title">关注我</h1>
        <div class="follow-list">
          <div class="follow-weibo-box">
            <div class="follow-weibo">
              <icon-svg name="weibo"></icon-svg>
            </div>
            <span class="weibo-user">柠檬水不要酸</span>
          </div>
          <div class="follow-qq-box">
            <div class="follow-qq">
              <icon-svg name="qq"></icon-svg>
            </div>
            <span class="qq-user">1272871429</span>
          </div>
        </div>
      </el-card>
    </div>
    <div class="hot-blog">
      <el-card class="box-card" shadow="hover">
        <div slot="header">
          <span class="title">热门文章</span>
        </div>
        <ul class="hot-blog-list" v-loading="hotListLoading">
          <li @click="goHotBlog(article.id)" v-for="article in hotList" :key="article.id">
            <div v-if="article.img" class="img-box">
              <!-- <img v-if="!article.img" src="~@/assets/img/article/default.png" /> -->
              <img :src="article.img" />
            </div>
            <div :class="['blog-item-message', article.img ? 'haveImg' : 'noImg']">
              <h2>{{ article.title }}</h2>
              <span>发布日期: {{ $utils.formatDateTimeYMD(article.createdAt) }}</span>
            </div>
          </li>
        </ul>
      </el-card>
    </div>
    <div class="class-blog" ref="class-blog">
      <el-card class="box-card" shadow="hover">
        <div slot="header">
          <span class="title">分类专题</span>
        </div>
        <ul class="column-list" v-loading="columnListLoading">
          <li @click="goColumn(column.id)" v-for="column in columnList" :key="column.id">
            <div class="img-box">
              <img v-if="!column.img" src="~@/assets/img/column/default.png" />
              <img v-if="column.img" :src="column.img" />
            </div>
            <div class="column-item-message">
              <h2>{{ column.name }}</h2>
              <span>文章数: {{ column.Articles.length }}</span>
            </div>
          </li>
        </ul>
      </el-card>
    </div>
  </div>
</template>

<script>
import throttle from 'lodash/throttle'
export default {
  created() {
    this.getColumn()
    this.getHotArticle()
  },
  mounted() {
    this.setAsidePosition()
  },
  beforeDestroy() {
    document.removeEventListener('scroll', this.addPosition, false)
  },
  data() {
    return {
      hotListLoading: false,
      columnListLoading: false,
      hotList: [],
      columnList: []
    }
  },
  methods: {
    setAsidePosition() {
      document.removeEventListener('scroll', this.addPosition, false)
      document.addEventListener('scroll', this.addPosition, false)
    },
    addPosition() {
      const domClass = this.$refs['class-blog']
      const domAside = this.$refs['blog-aside']

      const domClassOffsetTop = domClass.offsetTop + 207
      throttle(() => {
        if (domClassOffsetTop <= window.scrollY) {
          domAside.classList.add('sticky-position')
        } else {
          domAside.classList.remove('sticky-position')
        }
      }, 500)()
    },
    getColumn() {
      this.columnListLoading = true
      this.$ajax({
        url: this.$ajax.setUrl('/column'),
        method: 'get',
        params: this.$ajax.setParams()
      })
        .then(({ data }) => {
          if (data && data.code === 0) {
            this.columnList = data.data
          } else {
            this.$message.error(data.data || data.msg)
          }
          this.columnListLoading = false
        })
        .catch(() => {
          this.columnListLoading = false
        })
    },
    getHotArticle() {
      this.hotListLoading = true
      this.$ajax({
        url: this.$ajax.setUrl('/article/hotArticles'),
        method: 'get',
        params: this.$ajax.setParams()
      })
        .then(({ data }) => {
          if (data && data.code === 0) {
            // 可以使用limit，默认为5条
            this.hotList = data.data.list
          } else {
            this.$message.error(data.data || data.msg)
          }
          this.hotListLoading = false
        })
        .catch(() => {
          this.hotListLoading = false
        })
    },
    goHotBlog(id) {
      this.$router.push({ name: 'blog-details', params: { id } })
    },
    goColumn(id) {
      this.$router.push({ name: 'blog-column', params: { id } })
    }
  }
}
</script>

<style lang="scss">
#modules-blog {
  .modules-blog-aside {
    margin-left: 10px;
    &.sticky-position {
      position: sticky;
      position: -webkit-sticky;
      top: 70px;
    }

    .details-catalogue {
      .outlineElement {
        &.vditor-outline {
          > ul {
            padding-left: 0;
          }
          .vditor-outline__action {
            display: none;
          }
          .vditor-outline__item--current {
            background-color: #f5f5f5;
            color: #56b6e7;
          }
        }
      }
    }
    .follow-me {
      .follow-title {
        font-size: 20px;
        font-weight: bold;
        padding-bottom: 20px;
      }
      .follow-list {
        .follow-qq-box,
        .follow-weibo-box {
          display: flex;
          margin-bottom: 20px;
          span {
            line-height: 26px;
          }
        }
        .follow-weibo,
        .follow-qq {
          text-align: center;
          border-radius: 50%;
          width: 24px;
          height: 24px;
          font-size: 18px;
          line-height: 24px;
          margin-right: 20px;
        }

        .follow-qq-box {
          .qq-user {
            color: #666;
          }
          .follow-qq {
            border: 1px solid #56b6e7;
            color: #56b6e7;
          }

          &:hover {
            .qq-user {
              color: #56b6e7;
            }
            .follow-qq {
              color: #fff;
              background: #56b6e7;
            }
          }
        }
        .follow-weibo-box {
          .weibo-user {
            color: #666;
          }
          .follow-weibo {
            border: 1px solid #ff763b;
            color: #ff763b;
          }
          &:hover {
            .weibo-user {
              color: #ff763b;
            }
            .follow-weibo {
              color: #fff;
              background: #ff763b;
            }
          }
        }
      }
    }
    .box-card {
      margin-bottom: 10px;
      .title {
        color: #888;
        font-size: 16px;
      }
      .hot-blog-list {
        min-height: 50px;
        > li {
          display: flex;
          // margin: 10px 0;
          padding: 10px 0;
          border-bottom: 1px solid rgb(230, 230, 230);
          &:hover {
            img {
              transform: scale(1.1);
            }
            .blog-item-message {
              h2 {
                color: #409eff;
              }
            }
          }
          .img-box {
            width: 50px;
            height: 50px;
            margin-right: 10px;
            cursor: pointer;

            img {
              transition: all 0.6s;

              width: 100%;
              height: 100%;
              object-fit: cover;
              border-radius: 5px;
            }
          }
          .blog-item-message {
            &.noImg h2 {
              width: 245px;
            }
            &.haveImg h2 {
              width: 160px;
            }
            h2 {
              height: 30px;
              margin-bottom: 5px;
              color: #101010;
              font-size: 15px;
              line-height: 1.3;
              cursor: pointer;

              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            span {
              color: #aaa;
              font-size: 12px;
              line-height: 12px;
            }
          }
        }
      }

      .column-list {
        min-height: 50px;
        & > li {
          display: flex;
          position: relative;
          padding: 5px 0;
          &:hover {
            img {
              transform: scale(1.1);
            }
            .blog-item-message {
              h2 {
                color: #409eff;
              }
            }
          }
          h2,
          span {
            display: inline-block;
            line-height: 32px;
            height: 32px;
            cursor: pointer;
          }
          h2 {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 137px;
          }
          span {
            position: absolute;
            right: 0;
            color: #aaa;
            font-size: 12px;
            // line-height: 12px;
          }
        }

        .img-box {
          width: 32px;
          height: 32px;
          margin-right: 10px;
          cursor: pointer;

          img {
            transition: all 0.6s;

            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 5px;
          }
        }
      }
    }
  }
}
</style>
